<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>波纹效应</title>
		<style type="text/css">
			span {
				display: block;
				width: 100px;
				height: 100px;
				margin: 160px auto;
				animation: ripple 0.6s linear infinite;
				border-radius: 50px;
				background-color: #FFF;
			}
			/* dalgalanma efekti */
			
			@keyframes ripple {
				0% {
					box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.1), 0 0 0 20px rgba(0, 128, 0, 0.1), 0 0 0 40px rgba(0, 128, 0, 0.1), 0 0 0 60px rgba(0, 128, 0, 0.1);
				}
				100% {
					box-shadow: 0 0 0 20px rgba(0, 128, 0, 0.1), 0 0 0 40px rgba(0, 128, 0, 0.1), 0 0 0 60px rgba(0, 128, 0, 0.1), 0 0 0 80px rgba(0, 128, 0, 0);
				}
			}
		</style>
	</head>

	<body>
		<span></span>
	</body>

</html>